<template>
  <div class="container header-com d-none	d-md-block d-lg-block">
      <div class="row">
        <div class="logo-region col-4 col-md-5 col-lg-4">
          <div>
            <img :src="getUrl(options.company.logo)"/>
          </div>
        </div>
        <div class="col-8 col-md-7 col-lg-8 right">
          <div  v-if="options.header.headerText1" class="wrap-list">
            <div class="col-list">
              <div class="inner">
                <img v-if="options.company.companyShortName === '中山奥理德'" src="../assets/images/header-zhongshan-1.png" alt="">
                <img v-else src="../assets/images/header-1.png" alt="">
                <p v-html="options.header.headerText1"></p>
              </div>
            </div>
            <div  v-if="options.header.headerText2"  class="col-list">
              <div class="inner">
                <img v-if="options.company.companyShortName === '中山奥理德'" src="../assets/images/header-zhongshan-2.png" alt="">
                <img v-else src="../assets/images/header-2.png" alt="">
                <p v-html="options.header.headerText2">
                </p>
              </div>
            </div>
            <div v-if="options.header.headerText3" class="col-list">
              <div class="inner">
<!--                <img v-if="options.company.companyShortName === '中山奥理德'" src="../assets/images/header-zhongshan-3.png" alt="">
                <img v-else src="../assets/images/header-3.png" alt="">
                <p v-html="options.header.headerText3"></p>-->
              </div>
            </div>
            <div class="col-list justify-content-between">
              <div class="inner logo-region">
<!--                <a class="d-md-none d-lg-block" href="http://www.zspcl.com/" target="_blank">
                  <img class="mr-4 hand" :src="getUrl(options.company.zongbuLogo ? options.company.zongbuLogo : 'logo.png')"/>
                </a>
                <img class="d-md-none d-lg-block" :src="getUrl('qianjing_logo.png')"/>-->
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>

  export default {
    props: ['options'],
    computed: {},
    data() {
      return {}
    },
    components: {},
    mounted() {

    },
    methods: {

    }
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";

  .header-com {
    height: 85/@size;
    .row{
      padding: 13/@size 0;
    }
    .logo-region {
      display: flex;
      align-items: center;
      padding: 0;
      img {
        display: inline-block;
        width: auto;
        max-width: 100%;
        height: 50/@size;
      }
      .hand {
        cursor: pointer;
      }
    }
     .right{
       align-items: center;
       display: flex;
     }
    .wrap-list {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }
    .col-list {
      display: flex;
      align-items: center;
      .inner {
        background-color: #ffffff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

    }
    p {
      font-family: PingFangSC-Regular;
      font-size: 14/@size;
      color: #000000;
      letter-spacing: 0;
      padding-left: 5/@size;
      text-align: left;
      margin-bottom: 0;
    }
    .phone {
      padding: 1rem 0;
      flex-direction: column;
      a {
        width: 100%;
        img {
          display: inline-block;
          margin-right: 5px;
        }
      }
      > div {
        font-family: MicrosoftYaHeiUI;
        font-size: 18px;
        color: #FF4949;
        letter-spacing: 0;
        line-height: 18px;
      }
    }
    img {
      width: 30px;
      height: 30px;
    }
    .phone {
      padding-left: 5/@size;
      img {
        width: 30px;
        height: 30px;
      }
    }
  }


</style>
